import { defineComponent, ExtractPropTypes } from 'vue'
import iconFontJson from '@/assets/fonts/iconfont.json'
import { IconFontJson, IconType } from './types'
import './style.less'
import PropTypes from '../../utils/PropTypes'

const iconFont = iconFontJson as IconFontJson

const mouseEventProp = PropTypes.func<(e: MouseEvent) => void>()
const iconProps = {
  icon: PropTypes.strOption<IconType>().isRequired,
  colors: String,
  size: Number,
  opacity: Number,
  onClick: mouseEventProp,
  onDblclick: mouseEventProp,
  onMouseDown: mouseEventProp,
  onMouseup: mouseEventProp,
  onMouseover: mouseEventProp,
  onMouseleave: mouseEventProp,
  onMousemove: mouseEventProp,
  onMouseenter: mouseEventProp,
}

export type IconProps = ExtractPropTypes<typeof iconProps>

export default defineComponent({
  name: 'MIcon',
  props: iconProps,
  setup(props) {
    return () => {
      const { icon, ...others } = props
      return (
        <i
          class={[
            'm-icon',
            iconFont.font_family,
            iconFont.css_prefix_text + icon,
          ]}
          {...others}
          style={{
            color: props.colors,
            fontSize: props.size + 'px',
            opacity: props.opacity,
          }}
        ></i>
      )
    }
  },
})
